<template>
	<div class="menu-page">
		<template v-for="(item, index) in routerList" :key="item.path">
			<el-divider v-if="item.children?.length" content-position="left" style="margin: 10px 0">{{ item.name }}</el-divider>
			<div
				v-else
				class="menu-item"
				:style="[item.children?.length ? '' : `cursor: pointer;background-color:${colorList[index]}`]"
				@click="handleClick(item)"
			>
				<component v-if="!item.meta?.icon?.startsWith('http')" style="width: 1em; height: 1em; margin-right: 8px" :is="iconMap[item.meta?.icon]" />
				<el-image v-else :src="item.meta?.icon" style="width: 1em; height: 1em; margin-right: 8px"></el-image>
				<span>{{ item.name }}</span>
			</div>
			<template v-if="item.children?.length"><MenuItem :routerList="item.children" /> </template>
			<el-divider />
		</template>
	</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useRoutesList } from '/@/stores/routesList';
import iconMap from '/@/utils/iconMap';
import { colorList } from './methods';
import MenuItem from './cpn/menuItem.vue';
const router = useRouter();
const useRoutesListStore = useRoutesList();
const routerList = computed(() => {
	return useRoutesListStore.currentRouteChildRoutesList;
});

const handleClick = (item: Record<string, any>) => {
	if (item.children?.length) return;
	router.push({
		path: item.path,
	});
};
</script>
<style lang="scss" scoped>
.menu-page {
	height: calc(100vh - 110px);
	background-color: var(--next-bg-main);
	padding: 20px;
}
.menu-item {
	margin: 20px 20px;
	margin-left: 0px;
	width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
	padding: 20px;
	border-radius: 15px;
	color: #fff;
	&:hover {
		color: #409eff;
		box-shadow: 0px 0px 12px rgba(0, 123, 180, 0.3);
	}
}
</style>
